import React, { useEffect, useState } from 'react';  
import {StyleSheet,Dimensions} from 'react-native';
import Headers from '@/Components/header/Headers';
import {
    Text,
    View,
    TouchableOpacity,
    Colors,
    Constants,
    Icon,
  } from 'react-native-ui-lib';
import {SelectImg} from '@/utils/selectImg'
import {Camera,useCodeScanner,useCameraDevice} from 'react-native-vision-camera'; 
import {size} from '@/utils';  
import ImageScreen from '@/Components/Image/ImageScreen'
const width = Dimensions.get('window').width;

let ScanCodeScreen = (props:any)=>{
    const device = useCameraDevice('back', {
        physicalDevices: [
            'ultra-wide-angle-camera',
            'wide-angle-camera',
            'telephoto-camera'
        ]
    })

    const [camera,setCamera] = useState(null);
    const [torch,setTorch] = useState(false);

    useEffect(()=>{
        // const conyroller = new Camera();
    },[])

    const codeScanner = useCodeScanner({
        codeTypes:['qr','ean-13'],
        onCodeScanned:(codes)=>{
            let httpinfo = codes[0].value;
            console.log('httpinfo:',httpinfo);
            if(httpinfo.indexOf('http')==0){
                props.navigation.replace('webView',{
                    pathUrl:httpinfo
                });
            }
        }
    })

    function goBack(){
        props.navigation.goBack();
    }

    function openXiangCe(){
        SelectImg({
            width:width,
            cropperToolbarTitle:'选择',
            loadingLabelText:'loading...',
        }).then((res:any)=>{
            console.log('res----------------',res);
            /**
            {"creationDate": "1699586478", 
                "cropRect": null, 
                "data": null, 
                "duration": null,
                "exif": null, 
                "filename": "IMG_2353.PNG",
                "height": 781,
                "localIdentifier": "3B9A1B99-A92E-4893-AAC9-15CC361FF41C/L0/001",
                "mime": "image/jpeg",
                "modificationDate": "1699767177",
                "path": "/private/var/mobile/Containers/Data/Application/8222C530-6977-4B12-A7D7-F66424A45DB5/tmp/react-native-image-crop-picker/B59090AA-5A1D-4FA0-B7E2-BA0C4FADDF7F.jpg",
                "size": 64850,
                "sourceURL": "file:///var/mobile/Media/DCIM/102APPLE/IMG_2353.PNG", 
                "width": 780
            }
            **/
            // readerQR(res.path).then(ress=>{
            //     console.log('ress----',ress);
            //     if(ress.indexOf('http')==0){
            //         props.navigation.replace('webView',{
            //             pathUrl:ress
            //         });
            //     }else{
            //         console.log('二维码识别信息----',ress);
            //     }
            // })
        }).catch(err=>{
            console.log('err----',err)
        })
    }

    function onSwitchCameraHandler(){
        if(Camera){
            Camera
        }
    }

    return(
        <>
            <Camera {...props} 
                device={device} 
                isActive={true} 
                style={{ flex: 1,backgroundColor:"#000"}}  
                codeScanner={codeScanner}
                torch={torch?'on':'off'}
            >  
                <View style={{flex:1,position:'relative'}}>
                    <Headers
                        border={false}
                        hidden={true}
                        barStyle={1}
                        centerColor={'#fff'}
                        leftContent={
                            <TouchableOpacity onPress={()=>goBack()}>
                                <View style={styles.backBtn}>
                                    <Icon source={require('@/assess/images/icon/back.png')} size={10} tintColor={'#000'}/>
                                </View>
                            </TouchableOpacity>
                        }
                        rightContent={
                            <View>
                                <TouchableOpacity onPress={()=>openXiangCe()}>
                                    <View style={styles.backBtnColor}>
                                    <Text style={styles.backBtnTextColor}>相册</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        }
                        backgroundColor={'transparent'}
                        {...props}
                    />
                    <View style={styles.shoudiantongbtn}>
                        <TouchableOpacity onPress={()=>setTorch(!torch)}>
                            <View>
                                <ImageScreen width={size(40)} source={require('@/assess/images/me/light.png')}/>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            </Camera>
        </>
    )
};

const styles = StyleSheet.create({
    loginOutBtn:{
        width:'100%',
        backgroundColor:"#fff",
        height:size(50),
        marginTop:size(20),
        borderRadius:size(5)
    },
    oginOutBtn:{
        width:'100%',
        backgroundColor:"#fff",
        height:size(50),
        marginTop:size(20),
        borderRadius:size(5)
    },
    loginOutBtnText:{
        lineHeight:size(50),
        textAlign:'center'
    },
    contentBoxTop:{
        marginTop:size(20)
    },
    roundedDialog: {
        backgroundColor: Colors.white,
        marginBottom: Constants.isIphoneX ? 0 : size(20),
        borderRadius: size(12)
    },
    backBtn:{
        backgroundColor:Colors.white,
        width:size(24),
        height:size(24),
        borderRadius:size(25),
        flexDirection:'column',
        alignItems:'center',
        justifyContent:'center'
    },
    LoadingPage: {
        flex:1,
        justifyContent: "center",
        alignItems: "center",
    },
    barcodeTextURL: {
        fontSize:size(20),
        color: 'white',
        fontWeight: 'bold',
    },
    backBtnColor:{
        color: '#fff',
        backgroundColor:'transparent'
    },
    backBtnTextColor:{
        color: '#fff',
        fontWeight:'600'
    },
    shoudiantongbtn:{
        position:'absolute',
        bottom:size(30),
        left:0,
        right:0,
        flexDirection:'column',
        alignItems:'center',
        justifyContent:'center'
    }
})

export default ScanCodeScreen;

